<template>
  <div class="container">
    <normal-title
      title="用户登录"
      :back="true"
    ></normal-title>
    <img
      class="logo"
      src="../../images/logo_lg.png"
      mode="aspectFit"
    >
    <form
      :report-submit="true"
      @submit="formSubmit"
    >
      <div class="row">
        <img
          class="icon"
          src="../../images/phone_icon.png"
          mode="aspectFit"
        >
        <p class="input-type">手机号码</p>
        <input
          class="input"
          type="text"
          placeholder="请输入手机号码"
          placeholder-class="placeholder-style"
          v-model="phone"
        >
      </div>
      <div class="row">
        <img
          class="icon"
          src="../../images/password_icon.png"
          mode="aspectFit"
        >
        <p class="input-type">验证码</p>
        <input
          class="input"
          type="text"
          placeholder="请输入验证码"
          placeholder-class="placeholder-style"
          v-model="code"
        >
        <div
          @click="getCode"
          class="btn-code"
        >{{codeBtnText}}</div>
      </div>
      <button
        class="btn"
        form-type="submit"
      >登录</button>
    </form>
    <img
      class="bg"
      src="../../images/login_bg_2.png"
      mode="widthFix"
    >
  </div>
</template>

<script>
import NormalTitle from '@/components/NormalTitle'
import { request, judgeUser } from '@/utils'
export default {
  components: {
    NormalTitle
  },
  data () {
    return {
      phone: '',
      code: '',
      codeBtnText: '获取验证码',
      isSendCode: false,
      timer: null
    }
  },
  methods: {
    async formSubmit (e) {
      if (!this.checkPhone() || this.code.length < 5) {
        wx.showToast({
          title: '请正确输入验证信息~',
          icon: 'none'
        })
        return
      }
      var data = {
        phone: this.phone,
        code: this.code,
        form_id: e.mp.detail.formId
      }
      var res = await request('/v1/personal-center/register', 'post', data)
      if (res.data.success) {
        judgeUser(this)
        wx.showToast({
          title: '登录成功',
          icon: 'none',
          duration: 1000,
          mask: false,
          success () {
            setTimeout(() => {
              wx.navigateBack({
                delta: 1
              })
            }, 1000)
          }
        })
      }
    },
    async getCode () {
      if (!this.checkPhone()) {
        wx.showToast({
          title: '手机号码格式号码不正确',
          icon: 'none'
        })
      } else {
        if (!this.isSendCode) {
          var data = {
            phone: this.phone,
            content: '验证码${code}，您正在注册成为新用户，感谢您的支持！',
            sign_name: '广州惟度贸易有限公司',
            template_id: 'SMS_152090178'
          }
          var res = await request('/v1/personal-center/send-sms', 'post', data)
          this.isSendCode = true
          this.codeBtnText = 60
          var timer = setInterval(() => {
            if (this.codeBtnText > 0) {
              this.codeBtnText--
            } else {
              this.isSendCode = false
              this.codeBtnText = '获取验证码'
              clearInterval(timer)
            }
          }, 1000)
        } else {

        }
      }
    },
    checkPhone () {
      if (!/^1[34578]\d{9}$/.test(this.phone)) {
        return false
      } else {
        return true
      }
    }
  },
  mounted () {
    // this.formSubmit();
  }
}
</script>

<style>
page {
  height: 100%;
}
.placeholder-style {
  color: #ccc;
  font-size: 32rpx;
}
</style>

<style scoped lang="scss">
.container {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
  .row {
    margin-top: 40rpx;
    width: 650rpx;
    display: flex;
    align-items: center;
    font-size: 34rpx;
    height: 60rpx;
    .icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 20rpx;
    }
    .input-type {
      width: 160rpx;
    }
    .input {
      width: 250rpx;
    }
    .btn-code {
      width: 180rpx;
      font-size: 24rpx;
      border: 1rpx solid #d0b47f;
      border-radius: 30rpx;
      color: #d0b47f;
      height: 50rpx;
      text-align: center;
      line-height: 50rpx;
    }
  }
  button {
    border: none;
    background-color: transparent;
    box-sizing: border-box;
  }
  button::after {
    border: none;
  }
  height: 100%;
  .logo {
    margin-top: 180rpx;
    margin-bottom: 60rpx;
    height: 80rpx;
  }
  .btn {
    margin-top: 100rpx;
    width: 230rpx;
    height: 70rpx;
    line-height: 68rpx;
    border-radius: 35rpx;
    color: #fff;
    background: #d0b47f;
    font-size: 32rpx;
    padding: 0;
  }
  .bg {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750rpx;
  }
}
</style>




